/*
 * @Description: 订单列表-定制班线
 * @Author: ziwei.ma
 * @Date: 2019-07-23 14:03:03
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-11 14:47:29
 */

<template>
  <div id="app">
    <scroll
      class="customRouteOrderList_wrap"
      ref="scroll"
      :useBody="useBody"
      :getListData="getListDataByScroll"
      :up="up"
      v-show="show === DATA_LIST"
    >
      <template v-if="!isNoData">
        <order-item
          v-for="(item,index) in customRouteOrderList"
          :item="item"
          :key="index"
          @afreshState="afreshState"
        ></order-item>
      </template>
      <!-- 无数据展示 -->
      <no-data
        v-else
        :imgSrc="require('./assets/nodata_order.png')"
        text="没有相关订单"
      />
    </scroll>
    <!-- 网络超时展示无网络 -->
    <net-error
      @click.native="onNetError"
      v-show="show === DATA_NETERROR"
    />
  </div>
</template>

<script>
import OrderItemVue from './components/OrderItem.vue'
import NetError from '@/components/NetError'
import NoData from '@/components/NoData'
import { XBScroll } from 'vue-xb-ui-depot'
import { getcustomOrderList, getGlobals } from './api/api.js'
export default {
  components: {
    'order-item': OrderItemVue,
    'scroll': XBScroll,
    'no-data': NoData,
    'net-error': NetError
  },
  data() {
    return {
      show: 1,
      DATA_LIST: 1, // 正常数据显示
      DATA_NETERROR: 2, // 网络超时展示
      customRouteOrderList: [],
      isNoData: false,
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      }
    }
  },
  mounted() {
    // this._getGlobals()
    this.addEvent()
  },
  methods: {
    getListDataByScroll(pageIndex, pageSize) {
      return getcustomOrderList(pageIndex, pageSize).then(res => {
        if (res.count === 0) {
          this.isNoData = true
          return { length: pageSize, count: 1 }
        } else {
          this.isNoData = false
          this.customRouteOrderList = pageIndex === 1 ? res.list : this.customRouteOrderList.concat(res.list)
          return { length: pageSize, count: res.count }
        }
      }).catch(err => {
        console.dir(err)
        if (err.error.code === 'ECONNABORTED') {
          this.show = this.DATA_NETERROR
        }
      })
    },
    // 进行操作成功后刷新
    afreshState() {
      this.reset()
      this.$refs.scroll.mescroll.resetUpScroll()
      this.$EventBus.$emit('afreshState')
    },
    // 重置数据
    reset() {
      this.customRouteOrderList = []
      this.show = 1
    },
    // 无网络点击重新获取数据
    onNetError() {
      this.show = this.DATA_LIST
      this.afreshState()
    },
    // 获取包车全局配置
    _getGlobals() {
      getGlobals().then(res => {
        let BCglobals = res
        localStorage.setItem('BCglobals', JSON.stringify(BCglobals))
      })
    },
    addEvent() {
      window.onBack = msg => {
        console.log('~~~~~~~~onBack~~~~~~~~~~')
        let data = JSON.parse(msg)
        if (data.tagRefresh) {
          this.afreshState()
        }
      }
    }
  }
}
</script>

<style>
html,
body,
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.customRouteOrderList_wrap {
  padding: 32px;
  box-sizing: border-box;
}
</style>
